<template>
	<view class="wrap">
		<u-form :model="form" :rules="rules" :error-type="errorType" ref="uForm">
			<u-form-item label="昵称" prop="name" required>
				<u-input v-model="form.name" />
			</u-form-item>
		</u-form>
		<u-button @click="submit">提交</u-button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				errorType:['message'],
				form:{
					name:''
				},
				rules: {
					name: [
						{ 
							required: true, 
							message: '请输入昵称', 
							// 可以单个或者同时写两个触发验证方式 
							trigger: ['change','blur'],
						}
					]
				},
			}
		},
		methods: {
			submit() {
				this.$refs.uForm.validate(async (valid) => {
					if (valid) {
						//console.log(this.form);
						// 更新用户信息
						await this.$u.api.userInfoUpdate(this.form);
						// 刷新用户信息，更新 vuex_user
						this.$u.utils.updateUser();
						
						this.$u.toast('更新成功');
						
						console.log('验证通过');
					} else {
						console.log('验证失败');
					}
				});
			}
		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			this.$refs.uForm.setRules(this.rules);
			this.form.name = this.vuex_user.name;
		}
	}
</script>

<style style="scss" scoped>
.wrap {
	font-size: 28rpx;
	padding: 0 40rpx;
}
</style>
